<template>
  <view class="home-visit-time-page">
    <van-radio-group :value="radio" @change="handleChangeRadio">
      <van-cell-group>
        <van-cell clickable data-name="1" @click="onClickCell">
          <view slot="title">
            <view class="select-time-wrap">
              <van-radio slot="right-icon" name="1" />
              <view class="time-text">30分钟内</view>
            </view>
          </view>
        </van-cell>

        <van-cell clickable data-name="2" @click="onClickCell">
          <view slot="title">
            <view class="select-time-wrap">
              <van-radio slot="right-icon" name="2" />
              <view class="time-text">2小时内</view>
            </view>
          </view>
        </van-cell>

        <van-cell clickable data-name="3" use-label-slot @click="onClickCell">
          <view slot="title">
            <view class="select-time-wrap">
              <van-radio slot="right-icon" name="3" />
              <view class="time-text">今天</view>
            </view>
          </view>
          <view v-if="radio === '3'" slot="label" class="time-period-wrap">
            <view
              class="time-period"
              :class="{
                active: timePeriod === index,
                disabled: timePeriodDisabled[index],
              }"
              :data-index="index"
              @click.stop="handleSelectTimePeriod"
              v-for="(item, index) in timePeriodOptions"
              :key="index"
              >{{ item.text }}</view
            >
          </view>
        </van-cell>

        <van-cell clickable data-name="4" use-label-slot @click="onClickCell">
          <view slot="title">
            <view class="select-time-wrap">
              <van-radio slot="right-icon" name="4" />
              <view class="time-text">明天</view>
            </view>
          </view>

          <view v-if="radio === '4'" slot="label" class="time-period-wrap">
            <view
              class="time-period"
              :class="{
                active: timePeriod === index,
                disabled: timePeriodDisabled[index],
              }"
              :data-index="index"
              @click.stop="handleSelectTimePeriod"
              v-for="(item, index) in timePeriodOptions"
              :key="index"
              >{{ item.text }}</view
            >
          </view>
        </van-cell>

        <van-cell clickable data-name="5" use-label-slot @click="onClickCell">
          <view slot="title">
            <view class="select-time-wrap">
              <van-radio slot="right-icon" name="5" />
              <view class="time-text">后天</view>
            </view>
          </view>

          <view v-if="radio === '5'" slot="label" class="time-period-wrap">
            <view
              class="time-period"
              :class="{
                active: timePeriod === index,
                disabled: timePeriodDisabled[index],
              }"
              :data-index="index"
              @click.stop="handleSelectTimePeriod"
              v-for="(item, index) in timePeriodOptions"
              :key="index"
              >{{ item.text }}</view
            >
          </view>
        </van-cell>
      </van-cell-group>
    </van-radio-group>

    <view class="bottom-btn">
      <van-button
        color="#FF9600"
        custom-class="button-cus"
        type="primary"
        @click="handleSubmit"
        >确定</van-button
      >
    </view>
  </view>
</template>

<script>
import dayjs from "@/utils/dayjs.min";

export default {
  data() {
    return {
      radio: "1",
      timePeriod: 0,
      radioMapText: {
        1: "30分钟内",
        2: "2小时内",
        3: "今天",
        4: "明天",
        5: "后天",
      },
      timePeriodMapText: {
        0: "09:00-11:00",
        1: "11:00-13:00",
        2: "13:00-15:00",
        3: "15:00-17:00",
        4: "17:00-19:00",
      },
      disabledTimePeriod: 0,
      timePeriodDisabled: [],
      timePeriodOptions: [
        {
          text: "09:00-11:00",
        },
        {
          text: "11:00-13:00",
        },
        {
          text: "13:00-15:00",
        },
        {
          text: "15:00-17:00",
        },
        {
          text: "17:00-19:00",
        },
      ],
    };
  },
  methods: {
    onClickCell(data) {
      const { currentTarget } = data;
      const { dataset } = currentTarget;
      const { name } = dataset;

      if (parseInt(name) === 3) {
        this.handleComputedDisabedTimePeriod();
      } else {
        this.timePeriodDisabled = [];
        this.timePeriod = this.timePeriod || 0;
      }
      this.radio = name;
    },
    handleChangeRadio(data) {
      const { detail } = data;

      this.radio = detail;
    },
    handleSelectTimePeriod(data) {
      const { currentTarget } = data;
      const { dataset } = currentTarget;
      const { index } = dataset;

      if (parseInt(this.radio) === 3) {
        if (this.timePeriodDisabled[index]) {
          return;
        }
      }
      this.timePeriod = parseInt(index);
    },
    handleComputedDisabedTimePeriod() {
      const curTime = dayjs().format("YYYY-MM-DD");
      let arr = [
        dayjs().isAfter(dayjs(curTime + "11:00:00")),
        dayjs().isAfter(dayjs(curTime + "13:00:00")),
        dayjs().isAfter(dayjs(curTime + "15:00:00")),
        dayjs().isAfter(dayjs(curTime + "17:00:00")),
        dayjs().isAfter(dayjs(curTime + "19:00:00")),
      ];
      this.timePeriodDisabled = arr;

      const defaultIndex = arr.findIndex((item) => !item);
      this.timePeriod = defaultIndex;
    },

    handleSubmit() {
      const { radio, timePeriod, radioMapText, timePeriodMapText } = this;
      const eventChannel = this.getOpenerEventChannel();

      let sendData = {
        radio,
        timePeriod,
        dayText: radioMapText[radio],
        timePeriodText: timePeriodMapText[timePeriod],
        showText: "",
      };

      if (parseInt(radio) === 1 || parseInt(radio) === 2) {
        sendData["showText"] = radioMapText[radio];
      } else {
        sendData[
          "showText"
        ] = `${radioMapText[radio]} ${timePeriodMapText[timePeriod]}`;
      }

      eventChannel.emit("selectHomeVisitTime", {
        ...sendData,
      });
      uni.navigateBack();
    },
  },
};
</script>

<style lang="scss">
.home-visit-time-page {
  position: relative;
  min-height: 100vh;

  .select-time-wrap {
    display: flex;
    align-items: center;
    .time-text {
      font-size: 26rpx;
    }
  }

  .time-period-wrap {
    padding: 8rpx 0;
    display: flex;
    flex-wrap: wrap;
    .time-period {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 33.33%;
      height: 60rpx;
      border: 1rpx solid transparent;
      box-sizing: border-box;
    }
    .disabled {
      text-decoration: line-through;
    }
    .active {
      color: #fff;
      background-color: #ff9600;
    }
  }

  .bottom-btn {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 20rpx;
    box-sizing: border-box;
    .button-cus {
      width: 100%;
    }
  }
}
</style>
